<template>
	<div class="resource_filter">
		<el-radio-group size="small" v-model="queryData.showType" @change="queryResourceData">
			<el-radio label="">全部</el-radio>
			<el-radio v-for="(item, index) in dictEnums['FILE_TYPE']" :key="index" :label="item.value">
				<svg-icon :icon-name="item.value | fileTypeIcon" size="16"></svg-icon>
				{{ item.msg }}
			</el-radio>
		</el-radio-group>
		<el-input size="small" clearable placeholder="请输入库名称" v-model="queryData.keyName">
			<el-button slot="append" icon="el-icon-search" @click="queryResourceData"></el-button>
		</el-input>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		value: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			queryData: this.value
		};
	},
	computed: {
		...mapGetters(['dictEnums'])
	},
	mounted() {
		console.log(this.dictEnums['FILE_TYPE']);
		this.$set(this.queryData, 'showType', '');
	},
	methods: {
		//查询资源数据
		queryResourceData() {
			this.$emit('query', this.queryData);
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_filter::v-deep {
	flex: 1;
	display: flex;
	justify-content: space-between;
	.el-radio-group {
		display: flex;
		align-items: center;
		padding: 3px;
		border-radius: 4px;
		background-color: #eef1f5;
	}
	.el-radio {
		margin: 0;
		padding: 0 8px;
		border-radius: 4px;
		&.is-checked {
			background-color: #fff;
		}
	}
	.el-radio__input {
		display: none;
	}
	.el-radio__label {
		display: flex;
		align-items: center;
		height: 26px;
		padding: 0;
		.svg-icon {
			margin-right: 4px;
		}
	}
	.el-input-group {
		width: 240px;
	}
}
</style>
